<template>
  <div>
    <div class="kong"></div>
    <!-- <van-search
  v-model="value"
  placeholder="请输入搜索关键词"
  input-align="center"
/> -->
    <div class="indtop">
      <div class="indt">
        <!-- C:/Users/13153/Desktop/第四阶段vuereact/firstw  手机/shop/src/assets/image/banner/index/定位.png -->
        <van-search
          placeholder="请输入搜索关键词"
          @click="search"
          input-align="center"
          v-model="keywords"
        />
      </div>
      <ul class="indtopu">
        <li v-for="(item, i) in guid" :key="i">
          {{ item.name }}
        </li>
        <li class="ding"></li>
      </ul>
      <div class="fen">分类</div>
    </div>
    <!-- 双11跳转-->
    <div class="msg">
      <p class="msgp">筛选11.11大促商品</p>
    </div>
    <!-- 搜索列表 -->
    <div>
      <ul class="seau">
        <li class="seauli" v-for="(item, i) in searchlist" :key="i" @click="goDetail(item.id)">
          <div class="seaimg">
            <img :src="item.img" alt="" />
          </div>
          <div class="searr">
            <!-- 上两行 -->
            <p class="searrt">
              <span class="searrt1">溪牧原山茶花洁面泡沫 氨基酸...</span>
              <span class="searrt2">敏感肌可用，控油祛痘、男女可用...</span>
            </p>
            <!-- 下两行 -->
            <div class="searm">
              <p>
                <span class="searm1">￥{{item.market_price}}</span>
                <span class="searm2">￥1999</span>
                <span class="searm2">999人已付款</span>
              </p>
              <span class="searm3"> 11.11限时299元起 </span>
            </div>
            <!-- di -->
            <p class="searb">
              <span>999条评论</span>
              <span>99.9%好评</span>
            </p>
          </div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
import { getSearch,getgoodsinfo} from "../util/request/api";
export default {
  data() {
    return {
      guid: [
        {
          id: 1,
          name: "综合推荐",
        },
        {
          id: 2,
          name: "销量",
        },
        {
          id: 3,
          name: "价格",
        },
        {
          id: 4,
          name: "好评度",
        },
        {
          id: 5,
          name: "店铺",
        },
      ],
      keywords: "",
      searchlist: [],
    };
  },
  methods: {
    goDetail(id) {
      // this.$router 是路由实例化配置对象
      // console.log(this.searchlist[id], "this");

      // push会留下历史记录，点击浏览器后退会回到上一个页面
      this.$router.push("./detail/" + id);
      // replace，会替换当前历史记录，感觉不会用它
      // this.$router.replace('./order')
    },
    search() {
      console.log(this.keywords, "sasd");
      if (this.keywords == "") {
        // alert("搜索信息不能为空");
            console.log( "搜索信息不能为空")
      } else {
        getSearch({ keywords: this.keywords }).then((res) => {
          console.log(res, "ressssssss");
          if (res.code == 200) {
            console.log(res.list, "hjjhhj");
            this.searchlist = res.list;
            console.log(this.searchlist,'this.searchlist');
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.kong {
  height: 1.76rem;
  width: 100%;
}
.indtop {
  width: 100%;
  height: 1.6rem;
  background: #ff6040;
  /* margin-top: 1.767rem; */
  position: relative;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  /* border-top: 1px #ff6040 solid; */
}
.indt {
  /* display: flex;
  justify-content: space-evenly; */
  width: 7.1rem;
  height: 0.64rem;
  margin: 0 auto;
}
.indtopu {
  display: flex;
  justify-content: space-around;
  color: white;
  position: relative;
  top: 0.5rem;
}
.fen {
  color: white;
  position: absolute;
  right: 0%;
  z-index: 1;
  bottom: 0.25rem;
  right: 0.25rem;
  background: #ff6040;
  background-image: linear-gradient(180deg, #ff7a68 0%, #ff8a80 100%);
  box-shadow: -5px 5px 10px -5px #e63d2e;
}
.van-search {
  padding: 0;
}
.ding {
  width: 0.5rem;
}
.msg {
  width: 7.1rem;
  height: 0.64rem;
  background: #fff4f2;
  border: 0 solid #ff6040;
  border-radius: 2px;
  margin: 0.3rem auto;
  /*  */
}
.msgp {
  font-family: PingFangSC-Semibold;
  font-size: 0.32rem;
  color: #ff6040;
  text-align: center;
  line-height: 0.64rem;
}
/* 搜索列表 */

.seau {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: cornflowerblue; */
}
.seauli {
  width: 94.9%;
  height: 2.18rem;
  /* background-color: crimson; */
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
}
.seaimg img {
  width: 2.18rem;
  height: 2.18rem;
}
.searr {
  width: 4.66rem;
  height: 2.18rem;
  /* background: chartreuse; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.searrt {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.searm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.searrt1 {
  font-family: PingFangSC-Regular;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.32rem;
}
.searrt2 {
  font-family: PingFangSC-Regular;
  font-size: 0.28rem;
  color: #999999;
  line-height: 0.28rem;
}
.searm1 {
  font-family: PingFangSC-Semibold;
  font-size: 0.4rem;
  color: #ff6040;
  line-height: 0.4rem;
}
.searm2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.2rem;
  color: #999999;
  line-height: 0.2rem;
}
.searm3 {
  width: 2rem;
  height: 0.323rem;
  background: #ff8066;
  font-family: PingFangSC-Light;
  font-size: 0.2rem;
  color: #ffffff;
  line-height: 0.323rem;
}
.searb {
  font-family: PingFangSC-Regular;
  font-size: 0.2rem;
  color: #999999;
  line-height: 0.2rem;
  display: flex;
}
</style>